<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry.Data.PagedView Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.select {
	background-color: black;
	color: white;
}
.hover {
	background-color: #FFCC66;
	color: black;
}
.currentPage {
	font-weight: bold;
	color: red;
}
</style>
<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryPagedView.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var dsStates = new Spry.Data.XMLDataSet("../../data/states/states.xml", "/states/state");
var dsCities = new Spry.Data.XMLDataSet("../../data/states/{dsStates::url}", "/state/cities/city");

// Create a PagedView that will manage the paging of the data that is loaded
// into dsCities.

var pvCities = new Spry.Data.PagedView(dsCities, { pageSize: 20 });
var pvCitiesPagedInfo = pvCities.getPagingInfo();

// FilterData() and StartFilterTimer() are not required for paging at all. They are
// here only to support the filtering function used within this sample to show that
// the PagedView automatically adjusts paging as the data in the data set it depends
// on changes dynamically.

function FilterData()
{
	var tf = document.getElementById("filterTF");
	if (!tf.value)
	{
		// If the text field is empty, remove any filter
		// that is set on the data set.

		dsCities.filter(null);
		return;
	}

	// Set a filter on the data set that matches any row
	// that begins with the string in the text field.

	var regExpStr = tf.value;
	
	if (!document.getElementById("containsCB").checked)
		regExpStr = "^" + regExpStr;

	var regExp = new RegExp(regExpStr, "i");
	
	var filterFunc = function(ds, row, rowNumber)
	{
		var str = row["name"];
		if (str && str.search(regExp) != -1)
			return row;
		return null;
	};

	dsCities.filter(filterFunc);
}

function StartFilterTimer()
{
	if (StartFilterTimer.timerID)
		clearTimeout(StartFilterTimer.timerID);
	StartFilterTimer.timerID = setTimeout(function() { StartFilterTimer.timerID = null; FilterData(); }, 100);
}

-->
</script>

</head>

<body>
<h3>Spry.Data.PagedView   Sample </h3>
<p>This sample shows you how to use the Spry.Data.PagedView class to control the paging of data in a data set. The PagedView class is a special type of data set that listens to another data set and knows how to extract data out of the other data set whenever it changes. Because it is a data set, you use it within spry:regions to present a paged view of the data. There are special methods on the PagedView class that allow you to jump to random pages, or display a page that contains a specific row of data. Because the PagedView extracts its data from the data set it depends on, the ds_RowID value for each row in the PagedView is identical to the ds_RowID of the corresponding row in the data set it depends on.</p>
<p>The example below displays the cities for a given state as a set of pages. You can use the &quot;State&quot; select to dynamically change the data that is being paged. You can also type into the filter textfield to cause changes in the data that is being paged.</p>
<p>The example also has some buttons (First, Prev, Next, Last, etc) and textfields that allow you to dynamically change the page being viewed as well as other paging parameters with the Spry.Data.PagedView class.</p>
<hr />
<p>&nbsp;</p>

<!-- BEGIN Data loading and filtering controls. -->
<div>
	Choose a State:
	<span spry:region="dsStates" id="stateSelector">
		<select spry:repeatchildren="dsStates" name="stateSelect" onchange="dsStates.setCurrentRowNumber(this.selectedIndex);">
			<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{name}" selected="selected">{name}</option>
			<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{name}">{name}</option>
		</select>
	</span>
	Enter the Name of a City: <input type="text" id="filterTF" onkeyup="StartFilterTimer();" /> 
	Contains: <input type="checkbox" id="containsCB" checked="checked" onchange="FilterData();" />
</div>
<!-- END Data loading and filtering controls. -->

<p>&nbsp;</p>
<hr  />

<!-- BEGIN PagedView Controls -->
<p>
	<input type="button" value="First" onclick="pvCities.firstPage();" />
	<input type="button" value="Prev" onclick="pvCities.previousPage();" />
	<input type="button" value="Next" onclick="pvCities.nextPage();" />
	<input type="button" value="Last" onclick="pvCities.lastPage();" />
	<input type="text" id="pageNumTF" value="1" />
	<input type="button" value="Go To Page" onclick="pvCities.goToPage(parseInt(document.getElementById('pageNumTF').value));" />
	<input type="text" id="itemNumTF" value="10" />
	<input type="button" value="Show Page With Row Number" onclick="pvCities.goToPageContainingItemNumber(parseInt(document.getElementById('itemNumTF').value));" />
	<input type="text" id="pageSizeTF" value="10" />
	<input type="button" value="Set Page Size" onclick="pvCities.setPageSize(parseInt(document.getElementById('pageSizeTF').value));" />
</p>
<p spry:region="pvCitiesPagedInfo" spry:repeatchildren="pvCitiesPagedInfo">
	<a spry:if="{ds_CurrentRowNumber} != {ds_RowNumber}" href="#" onclick="pvCities.goToPage('{ds_PageNumber}'); return false;">{ds_PageNumber}</a>
	<span spry:if="{ds_CurrentRowNumber} == {ds_RowNumber}" class="currentPage">{ds_PageNumber}</span>
</p>
<p spry:region="pvCitiesPagedInfo" spry:repeatchildren="pvCitiesPagedInfo">
	<a spry:if="{ds_CurrentRowNumber} != {ds_RowNumber}" href="#" onclick="pvCities.goToPage('{ds_PageNumber}'); return false;">{ds_PageFirstItemNumber}-{ds_PageLastItemNumber}</a>
	<span spry:if="{ds_CurrentRowNumber} == {ds_RowNumber}" class="currentPage">{ds_PageFirstItemNumber}-{ds_PageLastItemNumber}</span>
</p>
<!-- END PagedView Controls -->

<!-- BEGIN PagedView Info Section -->
<div spry:region="pvCities">
	<p spry:if="{ds_UnfilteredRowCount} &gt; 0">Page {ds_PageNumber} of {ds_PageCount} - Items {ds_PageFirstItemNumber} - {ds_PageLastItemNumber} of {ds_UnfilteredRowCount}</p>
	<p spry:if="{ds_UnfilteredRowCount} == 0">No matching data found!</p>
</div>
<!-- END PagedView Info Section -->

<!-- BEGIN Paged Display Section -->
<div spry:region="pvCities dsCities">
	<ul spry:repeatchildren="pvCities" spry:choose="choose">
		<li spry:when="{pvCities::ds_RowID} == {dsCities::ds_CurrentRowID}" spry:select="select" spry:selectgroup="page" spry:selected="selected" spry:hover="hover" spry:setrow="pvCities">{pvCities::name}</li>
		<li spry:default="default" spry:select="select" spry:selectgroup="page" spry:hover="hover" spry:setrow="pvCities">{pvCities::name}</li>
	</ul>
</div>
<!-- END Paged Display Section -->
<hr />
<p>Options for the Spry.DataPagedView constructor:</p>
<table>
<tr>
		<th scope="col">Option Name </th>
		<th scope="col">Description</th>
	</tr>
	<tr>
		<td>forceFullPages</td>
		<td>Boolean. If true, and there is more than one page of data, force the last page of data to contain a full set of data. Note that this could cause some items to appear on both the last and next to last pages. </td>
	</tr>
	<tr>
		<td>pageSize</td>
		<td>Integer. The max number of items in a page. Default is 10.</td>
  </tr>
	<tr>
		<td>setCurrentRowOnPageChange</td>
		<td>Boolean. If true, the paged view will check to see if the data set's current row is in the current page. If it isn't, then it will force the current row of the data set to be the first item in the page.</td>
	</tr>
	<tr>
		<td>useZeroBasedIndexes</td>
		<td>Boolean. If true the caller will pass page indexes to the various paging functions that are between zero and n-1, where n is the total number of rows in the data set. The default is false, so page numbers are between 1 and n. </td>
	</tr>
</table>
<p>Methods on the Spry.Data.PagedView class:</p>
<table>
<tr>
		<th scope="col">Method Name </th>
		<th scope="col">Description</th>
	</tr>
	<tr>
		<td>getPageCount()</td>
		<td>Returns the number of pages that are necessary to accomodate all of the data. This count is based on the page size and number of rows of data in the data set. </td>
	</tr>
	<tr>
		<td>getCurrentPage()</td>
		<td>Returns the page number/index for the data that is returned by a call to getData(). By default, the number returned by this method will be between 1 and the page count number. If the use useZeroBasedIndexes constructor option was set to true, this method will return a number between zero and pageCount minus one. </td>
	</tr>
	<tr>
		<td>goToPage(pageIndex)</td>
		<td>Filter the data so that only rows associated with the specified page index are available via getData(). </td>
	</tr>
	<tr>
		<td>goToPageContainingRowID(rowID)</td>
		<td>Filter the data so that only rows on the same page as the row with the specified rowID are available.</td>
	</tr>
	<tr>
		<td>goToPageContainingRowNumber(rowNumber)</td>
		<td>Filter the data so that only rows on the same page as the row with the specified row number are available.</td>
	</tr>
	<tr>
		<td>goToPageContainingItemNumber(itemNumber)</td>
		<td>Filter the data so that only rows on the same page as the row with the specified item number are available.</td>
	</tr>
	<tr>
		<td>firstPage()</td>
		<td>Filter the data set so that only rows in the first page are available. </td>
	</tr>
	<tr>
		<td>lastPage()</td>
		<td>Filter the data set so that only rows in the last page are available.</td>
	</tr>
	<tr>
		<td>previousPage()</td>
		<td>Filter the data set so that only rows in the previous page are available.</td>
	</tr>
	<tr>
		<td>nextPage()</td>
		<td>Filter the data set so that only rows in the next page are available.</td>
	</tr>
	<tr>
		<td>getPageForRowID(rowID)</td>
		<td>Returns the index of the page that contains the row with the given ds_RowID. </td>
	</tr>
	<tr>
		<td>getPageForRowNumber(rowNumber)</td>
		<td>Returns the index of the page that contains the specified row number.</td>
	</tr>
	<tr>
		<td>getPageForItemNumber(itemNumber)</td>
		<td>Returns the index of the page that contains the specified item number.</td>
	</tr>
	<tr>
		<td>setPageSize(pageSize)</td>
		<td>Sets the maximum number of rows that can appear on any page. If zero, turns off paging. </td>
	</tr>
</table>
<p>Spry.Data.PagedView data references available in spry:region and spry:detailregion:</p>
<table>
<tr>
		<th scope="col">Data Reference </th>
		<th scope="col">Description</th>
	</tr>
	<tr>
		<td>{ds_PageNumber}</td>
		<td>The current page index. By default this will be a number between 1 and ds_PageCount. If the useZeroBasedIndexes constructor option was set to true, this will be a number between 1 and ds_PageCount minus one. </td>
	</tr>
	<tr>
		<td>{ds_PageSize}</td>
		<td>The maximum number of items that can be in a page. </td>
	</tr>
	<tr>
		<td>{ds_PageCount}</td>
		<td>The total number of pages required to display all of the data. </td>
	</tr>
	<tr>
		<td>{ds_PageItemRowNumber}</td>
		<td>The unfiltered row index for the current row being processed. </td>
	</tr>
	<tr>
		<td>{ds_PageItemNumber}</td>
		<td>The unfiltered item number for the current row being processed. This is the unfiltered row index of the row plus one. </td>
	</tr>
	<tr>
		<td>{ds_PageFirstItemNumber}</td>
		<td>The item number for the first row displayed in the current page. </td>
	</tr>
	<tr>
		<td>{ds_PageLastItemNumber}</td>
		<td>The item number for the last row displayed in the current page. </td>
	</tr>
	<tr>
		<td>{ds_PageItemCount}</td>
		<td>The total number of items in the current page. </td>
	</tr>
	<tr>
		<td>{ds_PageTotalItemCount}</td>
		<td>The total number of items in all pages. </td>
	</tr>
	<tr>
		<td>{ds_UnfilteredRowCount}</td>
		<td>The total number of rows in the data set. </td>
	</tr>
	<tr>
		<td>{ds_CurrentRowID}</td>
		<td>For the PagedView, this is *always* the ID of the first row in the current page.</td>
	</tr>
	<tr>
		<td>{ds_RowID}</td>
		<td>The row id for the row being processed. </td>
	</tr>
	<tr>
		<td>{ds_CurrentRowNumber}</td>
		<td>For the PagedView, this is *always* zero, which is the index of the first row in the current page.</td>
	</tr>
	<tr>
		<td>{ds_RowNumber}</td>
		<td>This is the row index, of the row being processed, in the current page. </td>
	</tr>
</table>
<p>Spry.Data.PagedView.PageInfo data references available in spry:region and spry:detailregion:</p>
<table>
<tr>
		<th scope="col">Data Reference </th>
		<th scope="col">Description</th>
	</tr>
	<tr>
		<td>{ds_PageCount}</td>
		<td>The total number of pages in the paged view.</td>
	</tr>
	<tr>
		<td>{ds_PageNumber}</td>
		<td>The page number within the paged view.</td>
	</tr>
	<tr>
		<td>{ds_PageSize}</td>
		<td>The maximum number of items that can be in a page.</td>
	</tr>
	<tr>
		<td>{ds_PageFirstItemNumber}</td>
		<td>The number of the first item in the page.</td>
	</tr>
	<tr>
		<td>{ds_PageLastItemNumber}</td>
		<td>The number of the last item in the page.</td>
	</tr>
	<tr>
		<td>{ds_PageItemCount}</td>
		<td>The number of items in the page.</td>
	</tr>
	<tr>
		<td>{ds_PageTotalItemCount}</td>
		<td>The total number of items from all pages.</td>
	</tr>
</table>
<p>&nbsp;</p>
</body>
</html>
